<template>
  <form :autoFormCreate="(form) => (this.form = form)">
    <a-table
      :columns="dataColumns"
      :dataSource="dataSource"
      :pagination="false"
    >
      <template
        v-for="(col, i) in columns_"
        :slot="col.dataIndex"
        slot-scope="text, record"
      >
        <template v-if="record.editable">  
        <a-input
          :key="col.dataIndex"
          v-if="!col.hasOwnProperty('dateType')"
          style="margin: -5px 0"
          :value="text"
          :placeholder="columns[i].title"
          @change="
            (e) => handleChange(e.target.value, record.key, col.dataIndex)
          "
        />

        <a-input
          :key="col.dataIndex"
          v-else-if="col.dateType == 'textarea' "
          type="textarea"
          style="margin: -5px 0"
          :value="text"
          :placeholder="columns[i].title"
          @change="
            (e) => handleChange(e.target.value, record.key, col.dataIndex)
          "
        />
        <a-input
          :key="col.dataIndex"
          v-else-if="col.dateType == 'date' "
          type="date"
          style="margin: -5px 0"
          :value="text"
          :placeholder="columns[i].title"
          @change="
            (e) => handleChange(e.target.value, record.key, col.dataIndex)
          "
        />


        

       </template>


        <template v-else>{{ text }}</template>
      </template>
      <template slot="operation" slot-scope="text, record">
        <template v-if="record.editable">
          <span v-if="record.isNew">
            <a @click="saveRow(record.key)">保存</a>
            <a-divider type="vertical" />
            <a-popconfirm
              :title="'确定要删除吗？'"
              @confirm="remove(record.key)"
            >
              <a>删除</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a @click="saveRow(record.key)">保存</a>
            <a-divider type="vertical" />
            <a @click="cancle(record.key)">取消</a>
          </span>
        </template>
        <span v-else>
          <a @click="toggle(record.key)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm :title="'确定要删除吗？'" @confirm="remove(record.key)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </template>
    </a-table>
    <a-button
      style="width: 100%; margin-top: 16px; margin-bottom: 8px"
      type="dashed"
      icon="plus"
      @click="newMember"
      >添加</a-button
    >
  </form>
</template>

<script>
// const columns = [
//   {
//     title: '成员姓名',
//     dataIndex: 'name',
//     key: 'name',
//     width: '20%',
//     scopedSlots: { customRender: 'name' }
//   },
//   {
//     title: '工号',
//     dataIndex: 'number',
//     key: 'number',
//     width: '20%',
//     scopedSlots: { customRender: 'number' }
//   },
//   {
//     title: '所属部门',
//     dataIndex: 'department',
//     key: 'department',
//     width: '40%',
//     scopedSlots: { customRender: 'department' }
//   },
//   {
//     title: '操作',
//     key: 'operation',
//     scopedSlots: { customRender: 'operation' }
//   }
// ]

// const dataSource = [
//   {
//     key: 1,
//     name: '小明',
//     number: '001',
//     editable: false,
//     department: '行政部'
//   },
//   {
//     key: 2,
//     name: '李莉',
//     number: '002',
//     editable: false,
//     department: 'IT部'
//   },
//   {
//     key: 3,
//     name: '王小帅',
//     number: '003',
//     editable: false,
//     department: '财务部'
//   }
// ]

export default {
  name: "UserForm",
  //   i18n: require('./i18n-user'),
  props: {
    columns_: Array,
    dataSource_: Array,
  },
  data() {
    return {
      columns: [],
      dataSource: [],
      // addMod:{},
    };
  },
  created() {
    const { columns_, dataSource_,assemble } = this;
    this.columns = JSON.parse(JSON.stringify(columns_));
    this.dataSource = dataSource_ && dataSource_.length > 0 ? assemble(dataSource_) : [];
  },
  computed: {
    dataColumns() {
      this.columns.push({
        title: "操作",
        key: "operation",
        scopedSlots: { customRender: "operation" },
      });
      return this.columns.map((column) => {
        column.title = column.title;
        return column;
      });
    },
    addMod() {
      let addMod = {};
      for (let i = 0; i < this.columns_.length; i++) {
        addMod[this.columns_[i].dataIndex] = "";
      }

      return addMod;
    },
  },

  methods: {
    handleSubmit(e) {
      e.preventDefault();
    },
    assemble(dataSource){
       for(let i=0;i<dataSource.length;i++){
           dataSource[i].key = parseInt(i+1)
           dataSource[i].editable = false
           dataSource[i].isNew = false
       }   
       
       return dataSource

    },
    newMember() {
      this.dataSource.push({
        key: this.dataSource.length + 1,
        editable: true,
        isNew: true,
        ...this.addMod,
      });
    },
    remove(key) {
      const newData = this.dataSource.filter((item) => item.key !== key);
      this.dataSource = newData;
    },
    saveRow(key) {
      let target = this.dataSource.filter((item) => item.key === key)[0];
      target.editable = false;
      target.isNew = false;
    },
    toggle(key) {
      // alert(key)



      // let target = this.dataSource.filter((item) => item.key === key)[0];
     this.$set( this.dataSource,key-1,{...this.dataSource[key-1],editable:!this.dataSource[key-1].editable })
      //  this.dataSource[key-1].editable = !this.dataSource[key-1].editable



      // target.editable = !target.editable;

    },
    getRowByKey(key, newData) {
      const data = this.dataSource;
      return (newData || data).filter((item) => item.key === key)[0];
    },
    cancle(key) {
      let target = this.dataSource.filter((item) => item.key === key)[0];
      target.editable = false;
    },
    handleChange(value, key, column) {
      const newData = [...this.dataSource];
      const target = newData.filter((item) => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.dataSource = newData;
      }
    },
    getArray(){
       const {addMod,dataSource} = this
       let last = []
       for(let i=0;i<dataSource.length;i++){
           let tmp = {}
            for(let key in  dataSource[i]){
                if(addMod.hasOwnProperty(key)){
                     tmp[key] = dataSource[i][key]
                }
            }
            last.push(tmp)
       }
       return last
    }
  },
};
</script>

<style scoped>
</style>
